<template>
  <a-modal
    title="编辑题目"
    :destroyOnClose="true"
    :maskClosable="false"
    :keyboard="false"
    v-model:visible="visible"
    @ok="handleOk"
  >
    <a-spin :spinning="spinning">
      <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
        <a-form-item label="题目ID">
          <a-input v-model:value="formState.id" disabled />
        </a-form-item>
        <a-form-item label="题目标题" name="title">
          <a-input v-model:value="formState.title" />
        </a-form-item>
        <a-form-item label="题目类型" name="type">
          <a-select v-model:value="formState.type" placeholder="请选择题目类型" @change="setAnswer">
            <a-select-option :value="1"> 单选题 </a-select-option>
            <a-select-option :value="2"> 多选题 </a-select-option>
            <a-select-option :value="3"> 判断题 </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="题目详情(支持html)" name="content">
          <a-textarea v-model:value="formState.content" :auto-size="{ minRows: 3 }" placeholder="题目详情" :rows="4" />
        </a-form-item>
        <a-form-item label="题目选项(一行一个)" name="options">
          <a-textarea v-model:value="formState.options" :auto-size="{ minRows: 3 }" placeholder="题目选项" :rows="4" />
        </a-form-item>
        <a-form-item label="题目答案(多选逗号分隔)" name="answer">
          <a-input v-model:value="formState.answer" />
        </a-form-item>
        <a-form-item label="题目分值" name="score" style="width: 100%">
          <a-input-number
            v-model:value="formState.score"
            :min="1"
            :max="99999"
            style="width: 100%"
            @change="setScore"
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { defineComponent, toRefs, ref, watch } from "vue";
import { editOrAddQuestion, getQuestion } from "../../utils/api";
import { message } from "ant-design-vue";

export default defineComponent({
  props: {
    data: Object,
  },
  setup(props, ctx) {
    const { visible, questionId, paperId } = toRefs(props.data);
    const paperList = ref([]);
    const formRef = ref();
    const formState = ref();
    const spinning = ref(false);
    const currentType = ref(null);
    const currentScore = ref(1);
    const rules = {
      title: [{ required: true, message: "请输入标题", trigger: "blur" }],
      type: [{ required: true, message: "请选择类型", trigger: "blur", type: "number" }],
      content: [{ required: true, message: "请输入说明", trigger: "blur" }],
      options: [{ required: true, message: "请输入选项", trigger: "blur" }],
      answer: [{ required: true, message: "请输入答案", trigger: "blur" }],
      score: [{ required: true, message: "请输入分值", trigger: "blur", type: "number" }],
    };
    const optionList = [];
    for (var i = 65; i < 91; i++) {
      optionList.push(String.fromCharCode(i));
    }

    const handleOk = () => {
      formRef.value
        .validate()
        .then(() => {
          // 构造请求数据
          let sendObj = Object.assign({}, formState.value);
          sendObj.paperId = paperId.value;
          sendObj.answer = sendObj.answer.split(",");
          sendObj.options = [];
          formState.value.options.split("\n").forEach((item, index) => {
            sendObj.options.push({
              option: optionList[index],
              content: item,
            });
          });
          // 发送
          editOrAddQuestion(sendObj).then((res) => {
            if (res.data.code === 500) {
              message.error(res.data.message);
              return;
            }
            message.success(res.data.message);
            visible.value = false;
            ctx.emit("editFinish");
          });
        })
        .catch((error) => {
          console.log("error", error);
        });
    };

    const setAnswer = () => {
      currentType.value = formState.value.type;
      if (formState.value.type === 3) {
        formState.value.options = ["对", "错"].join("\n");
      }
    };
    const setScore = () => {
      currentScore.value = formState.value.score;
    };

    watch(visible, (value) => {
      if (!value) {
        return;
      }

      formState.value = {
        id: -1,
        title: "",
        type: currentType,
        content: "无",
        options: "",
        answer: "",
        score: currentScore,
      };
      setAnswer();
      if (questionId.value != -1) {
        spinning.value = true;
        getQuestion(questionId.value).then((res) => {
          let result = res.data.data;
          formState.value = result;
          let options = JSON.parse(result.options).map((item) => {
            return item.content;
          });
          formState.value.options = options.join("\n");
          formState.value.answer = JSON.parse(result.answer).join(",");
          spinning.value = false;
        });
      }
    });

    return {
      formRef,
      formState,
      paperList,
      visible,
      spinning,
      rules,
      optionList,
      currentType,
      currentScore,
      handleOk,
      setAnswer,
      setScore,
    };
  },
});
</script>
